<template>
  <div class="parent">
    <echartDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watchEffect } from "vue";
import echartDom from "./chartDom.vue";
import { queryConsumeChartForDay } from "@/api/waterKanban";
import { watch } from "fs";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  },
  chartData: {
    type: Object,
    default: () => {}
  },
  currentData: {
    type: Object,
    default: () => {}
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {} as any,
  axisData: [],
  predicetedCOPDataWidthOptimize: [],
  predicetedCOPDataWidthoutOptimize: [],
  actualCopData: [],
  targetCopData: []
});
const { option, axisData, predicetedCOPDataWidthOptimize, predicetedCOPDataWidthoutOptimize, actualCopData, targetCopData } = toRefs(state);

const requestStatusCodes = {
  "11": "Predicted COP",
  "12": "Actiual COP",
  "13": "External Temperature"
};

watchEffect(() => {
  console.log(props.chartData, "props.chartData");
  axisData.value = [];
  for (const key in props.chartData) {
    const element = props.chartData[key];
    if (key == "31") {
      element.forEach(item => {
        axisData.value.push(item.timeValue);
        predicetedCOPDataWidthOptimize.value.push(item.value);
      });
    }
    if (key == "33") {
      element.forEach(item => {
        predicetedCOPDataWidthoutOptimize.value.push(item.value);
      });
    }
    if (key == "32") {
      element.forEach(item => {
        actualCopData.value.push(item.value);
      });
    }
    if (key == "34") {
      element.forEach(item => {
        targetCopData.value.push(item.value);
      });
    }
  }
  if (isShowEcharts.value) getoptions();
});

const getoptions = () => {
  isShowEcharts.value = true;
  const colors = ["#4786FF", "#FFA299", "#14C7C7", "purple"];
  option.value = {
    backgroundColor: props.type == "dark" ? "#001e3b" : "",
    color: colors,
    title: {
      text: "Predicted, Actual and Target COP",
      top: "2",
      left: "center"
    },
    grid: {
      left: "50px",
      top: "90px",
      right: "10px",
      bottom: "10px",
      containLabel: true
    },
    legend: {
      data: ["Predicted COP with Optimization", "Predicted COP without Optimization", "Actual COP(SCADA Readings)", "Target COP(Customer Ideal)"],
      top: "30"
    },
    tooltip: {
      trigger: "axis"
      // formatter: (val: any) => {
      //   // console.log(val, "val222");
      //   const valStrArr = val.map(item => {
      //     if (item.seriesName === "Prediction Error Band") {
      //       return `${item.marker}${item.seriesName}:20<br/>`;
      //     } else {
      //       return `${item.marker}${item.seriesName}:${item.value}<br/>`;
      //     }
      //   });
      //   return valStrArr.join("") + `${val?.[0].axisValue}<br/>`;
      // }
    },
    xAxis: {
      name: "",
      type: "category",
      boundarGap: false,
      data: axisData.value,
      axisPointer: {
        type: "shadow"
      }
    },
    yAxis: [
      {
        name: "COP",
        type: "value",
        alignTicks: true,
        position: "left",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#4786FF"
          }
        },
        min: function (value) {
          return Math.floor(value.min * 10) / 10 - Math.floor(value.min * 10) / 500;
        },
        max: function (value) {
          return Math.ceil(value.max * 10) / 10;
        }
      }
    ],
    series: [
      {
        name: "Predicted COP with Optimization",
        data: predicetedCOPDataWidthOptimize.value,
        type: "line",
        lineStyle: {
          width: 3,
          color: "#4786FF"
        },
        smooth: true
      },
      {
        name: "Predicted COP without Optimization",
        data: predicetedCOPDataWidthoutOptimize.value,
        type: "line",

        lineStyle: {
          color: "#FFA299",
          width: 3,
          type: "solid"
        },
        min: function (value) {
          return Math.floor(value.min / 100) * 100 - 50;
        },
        max: function (value) {
          return Math.ceil(value.max / 100) * 100 + 50;
        },
        smooth: true
      },
      {
        name: "Actual COP(SCADA Readings)",
        data: actualCopData.value,
        type: "line",
        lineStyle: {
          color: "#14C7C7",
          width: 3,
          type: "dashed"
        }
      },
      {
        name: "Target COP(Customer Ideal)",
        data: targetCopData.value,
        type: "line",
        lineStyle: {
          color: "purple",
          width: 2,
          type: "dashed"
        },
        smooth: true
      }
    ]
  };
  if (JSON.stringify(props.currentData) != "{}") {
    if (props.currentData.analysisType == "预测") {
      option.value.series[1].markPoint = {
        data: [
          {
            value: props.currentData.settingValue,
            xAxis: props.currentData.pointTime,
            yAxis: props.currentData.settingValue
          }
        ]
      };
    } else {
      option.value.series[2].markPoint = {
        data: [
          {
            value: props.currentData.settingValue,
            xAxis: props.currentData.pointTime,
            yAxis: props.currentData.settingValue
          }
        ]
      };
    }
  }
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
